            
                <!-- BEGIN Page Title -->
                <div class="page-title">
                    <div>
                        <h1><i class="icon-file-alt"></i> Form Layout</h1>
                        <h4>Simple form element, griding and layout</h4>
                    </div>
                </div>
                <!-- END Page Title -->

                <!-- BEGIN Breadcrumb -->
                <div id="breadcrumbs">
                    <ul class="breadcrumb">
                        <li>
                            <i class="icon-home"></i>
                            <a href="index.html">Home</a>
                            <span class="divider"><i class="icon-angle-right"></i></span>
                        </li>
                        <li class="active">Form Layout</li>
                    </ul>
                </div>
                <!-- END Breadcrumb -->
                
                <div class="row-fluid">
									<div class="span12">
                                        <div class="alert alert-success">
                                            <button data-dismiss="alert" class="close">×</button>
                                            <h4>Success!</h4>
                                            <p>The page has been added.</p>
                                        </div>
                                        <div class="alert alert-error">
                                            <button data-dismiss="alert" class="close">×</button>
                                            <h4>Error!</h4>
                                            <p>The daily cronjob has failed.</p>
                                        </div>
                                    </div>                
                </div>

                <!-- BEGIN Main Content -->
                <div class="row-fluid">
                    <div class="span12">
                        <div class="box box-black">
                            <div class="box-title">
                                <h3><i class="icon-reorder"></i> Bordered Form</h3>
                                <div class="box-tool">
                                	<button type="submit" class="btn btn-primary"><i class="icon-ok"></i> Save</button>
                                    <a href="#" class="btn btn-success"><i class="icon-save"></i> Save</a>
                                    <a href="#" class="btn btn-danger"><i class="icon-remove"></i></a>                                
                                    <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            
                            <div class="box-content">
                                <form action="#" class="form-horizontal form-bordered">

                                    <div class="control-group">
                                        <label for="textfield4" class="control-label">Text input</label>
                                        <div class="controls">
                                            <input type="text" name="textfield4" id="textfield4" placeholder="Text input" class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="password4" class="control-label">Password</label>
                                        <div class="controls">
                                            <input type="password" name="password4" id="password4" placeholder="Password input" class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">Checkboxes</label>
                                        <div class="controls">
                                            <label class='checkbox'>
                                                <input type="checkbox" name="checkbox"> Checkbox 1
                                            </label>
                                            <label class='checkbox'>
                                                <input type="checkbox" name="checkbox"> Checkbox 2
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group last">
                                        <label for="textarea4" class="control-label">Textarea</label>
                                        <div class="controls">
                                            <textarea name="textarea4" id="textarea4" rows="5" class="input-block-level"></textarea>
                                        </div>
                                    </div>
                                    
                                    <div class="form-actions">
                                       <button type="submit" class="btn btn-primary"><i class="icon-ok"></i> Save</button>
                                       <button type="button" class="btn">Cancel</button>
                                    </div>
                                    
                                 </form>
                            </div>
                            
                        </div>
                    </div>
                </div>
                
				<div class="row-fluid">
                    <div class="span12">
                        <div class="box">
                            <div class="box-title">
                                <h3><i class="icon-folder-close"></i>Tab</h3>
                            </div>

                            <div class="box-content">
                            
							    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
							        <li class="active"><a href="#red" data-toggle="tab"><i class="icon-ok"></i>&nbsp;Red</a></li>
							        <li><a href="#orange" data-toggle="tab">Orange</a></li>
							        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
							        <li><a href="#green" data-toggle="tab">Green</a></li>
							        <li><a href="#blue" data-toggle="tab">Blue</a></li>
							    </ul>
							    <div id="my-tab-content" class="tab-content">
							        <div class="tab-pane active" id="red">
							            <h1>Red</h1>
							            <p>red red red red red red</p>
							        </div>
							        <div class="tab-pane" id="orange">
							            <h1>Orange</h1>
							            <p>orange orange orange orange orange</p>
							        </div>
							        <div class="tab-pane" id="yellow">
							            <h1>Yellow</h1>
							            <p>yellow yellow yellow yellow yellow</p>
							        </div>
							        <div class="tab-pane" id="green">
							            <h1>Green</h1>
							            <p>green green green green green</p>
							        </div>
							        <div class="tab-pane" id="blue">
							            <h1>Blue</h1>
							            <p>blue blue blue blue blue</p>
							        </div>
							    </div>

 								<script type="text/javascript"> 								
								    jQuery(document).ready(function ($) {
								        $('#tabs').tab();
								    });
								</script>                               
                            
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="box">
                            <div class="box-title">
                                <h3><i class="icon-reorder"></i> Validation Form</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <form action="#" class="form-horizontal" id="validation-form" method="get">
                                    <div class="control-group">
                                        <label class="control-label" for="username">Username:</label>
                                        <div class="controls">
                                            <div class="span12">
                                                <input type="text" name="username" id="username" class="input-xlarge" data-rule-required="true" data-rule-minlength="3" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label" for="email">Email Address:</label>
                                        <div class="controls">
                                            <div class="span12">
                                                <input type="email" name="email" id="email" class="input-xlarge" data-rule-required="true" data-rule-email="true" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label" for="password">Password:</label>
                                        <div class="controls">
                                            <div class="span12">
                                                <input type="password" name="password" id="password" class="input-xlarge" data-rule-required="true" data-rule-minlength="6" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label" for="confirm-password">Confirm Password:</label>
                                        <div class="controls">
                                            <div class="span12">
                                                <input type="password" name="confirm-password" id="confirm-password" class="input-xlarge" data-rule-required="true" data-rule-minlength="6" data-rule-equalTo="#password" />
                                            </div>
                                        </div>
                                    </div>

                                    <hr>

                                    <div class="control-group">
                                        <label for="select" class="control-label">Select</label>
                                        <div class="controls">
                                            <select class="input-xlarge" name="select" id="select" data-rule-required="true">
                                                <option value="">-- Please select --</option>
                                                <option value="1">Option-1</option>
                                                <option value="2">Option-2</option>
                                                <option value="3">Option-3</option>
                                                <option value="4">Option-4</option>
                                                <option value="5">Option-5</option>
                                                <option value="6">Option-6</option>
                                                <option value="7">Option-7</option>
                                                <option value="8">Option-8</option>
                                                <option value="9">Option-9</option>
                                                <option value="10">Option-10</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="urlfield" class="control-label">URL</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" placeholder="Enter valid URL" name="urlfield" id="urlfield" data-rule-url="true" data-rule-required="true">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="minlengthfield" class="control-label">Minlength</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" placeholder="At least 3 characters" name="minlengthfield" id="minlengthfield" data-rule-minlength="3" data-rule-required="true">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="maxlengthfield" class="control-label">Maxlength</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" placeholder="Max 6 characters" name="maxlengthfield" id="maxlengthfield" data-rule-maxlength="6" data-rule-required="true">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="datefield" class="control-label">Date</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" placeholder="YYYY-MM-DD" name="datefield" id="datefield" data-rule-dateISO="true" data-rule-required="true">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="numberfield" class="control-label">Number</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" placeholder="Only numbers" name="numberfield" id="numberfield" data-rule-number="true" data-rule-required="true">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="digitsfield" class="control-label">Digits</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" placeholder="Only digits" name="digitsfield" id="digitsfield" data-rule-digits="true" data-rule-required="true">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="creditcardfield" class="control-label">Creditcard</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" placeholder="Enter valid creditcard. ex: 446-667-651" name="creditcardfield" id="creditcardfield" data-rule-creditcard="true" data-rule-required="true">
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <input type="submit" class="btn btn-primary" value="Submit">
                                        <button type="button" class="btn">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Main Content -->                
                